<!--  -->
<template>
  <div class="overView">
    <div class="left">
      <h1 class="score">{{score}}</h1>
      <div class="name">综合评分</div>
      <div class="desc">高于周边商家的{{rankRate}}%</div>
    </div>
    <div class="right">
      <!-- 服务态度 -->
      <div class="score-wrapper">
        <span class="title">服务态度</span>
        <star class="star" :size="36" :score="serviceScore"></star>
        <span class="score">{{serviceScore}}</span>
      </div>

      <!-- 服务态度 -->
      <div class="score-wrapper">
        <span class="title">食物质量</span>
        <star class="star" :size="36" :score="foodScore"></star>
        <span class="score">{{foodScore}}</span>
      </div>

      <!-- 送达时间 -->
      <div class="delivery-wrapper">
        <span class="title">送达时间</span>
        <span class="time">{{deliveryTime}}分钟</span>
      </div>
    </div>
  </div>
</template>

<script>
import star from '@/components/star/star'
export default {
  name: 'overView',
  props: {
    serviceScore: Number,
    foodScore: Number,
    deliveryTime: Number,
    score: Number,
    rankRate: Number
  },
  data () {
    return {}
  },
  methods: {},
  components: {
    star
  }
}
</script>
<style lang='stylus' scoped>
.overView
  display flex
  .left
    flex 0 0 137px
    display inline-block
    margin 18px auto
    text-align center
    .score
      font-size 24px
      color rgb(255, 153, 0)
      line-height 28px
      margin-bottom 6px
    .name
      font-size 12px
      color rgb(7, 17, 27)
      line-height 12px
      margin-bottom 8px
    .desc
      font-size 10px
      color #4d555d
      line-height 10px
      margin-bottom 6px
  .right
    flex 1
    margin 18px 1px 18px 24px
    .score-wrapper
      font-size 0
      line-height 18px
      .title
        display inline-block
        vertical-align top
        font-size 12px
        color rgb(7, 17, 27)
        line-height 18px
        margin-right 12px
      .star
        display inline-block
        vertical-align top
        margin-right 12px
      .score
        font-size 12px
        color rgb(255, 153, 0)
        line-height 18px
        display inline-block
        vertical-align top
    .delivery-wrapper
      margin-bottom 6px
      .title
        font-size 12px
        color rgb(7, 17, 27)
        line-height 18px
        margin-right 12px
      .time
        font-size 12px
        color rgb(147, 153, 159)
        line-height 18px
</style>
